<template>
	<div class="foot">
		<div class="gray"></div>
		<ul class="list" v-for="(item,index) in Footlist">
			<li class="li" v-for="(item,index) in item.Footlist1"><a href="javascript:void(0)" @click="num=index">{{item.id}}</a></li>
		</ul>
		<ol class="list-item" v-if="num===0" v-for="(item,index) in Footlist">
			<li v-for="(item,index) in item.Footlist2">{{item.id}}</li>
		</ol>
		<ol class="list-item" v-if="num===1" v-for="(item,index) in Footlist">
			<li v-for="(item,index) in item.Footlist3">{{item.id}}</li>
		</ol>
		<ol class="list-item" v-if="num===2" v-for="(item,index) in Footlist">
			<li v-for="(item,index) in item.Footlist4">{{item.id}}</li>
		</ol>
		<ol class="list-item" v-if="num===3" v-for="(item,index) in Footlist">
			<li v-for="(item,index) in item.Footlist5">{{item.id}}</li>
		</ol>
	</div>

</template>

<script>
	export default {
		props: ['Footlist'],
		data() {
			return {
				num: 0
			}
		},
		methods: {
			change(val) {

			}
		},

	}
</script>

<style scoped>
	.gray {
		width: 100%;
		height: 0.17rem;
		background-color: #cccccc;
	}

	.list {
		display: flex;
		margin-top: 0.3rem;
		padding-bottom: 0.2rem;
		border-bottom: 1px solid #cccccc;
	}

	.li {
		flex: 1;
		font-size: 0.27rem;
	}

	.li a {
		color: black;
	}

	.list-item {
		background-color: white;
		color: #212121;
		position: relative;
		overflow: hidden;
		margin-top: 0.1rem;
	}

	.list-item li {
		width: 20%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border: 1px solid gray;
		margin: 0.2rem 0.167rem;
		border-radius: 5px;
		font-size: 0.28rem;
		color: gray;
	}
</style>
